<template>
	<view class="kd-order-page">
		<view class="tab-option">
			<uni-segmented-control
				:current="activeTab"
				:values="items"
				@clickItem="handleChangeOrderStatus"
				styleType="text"
				activeColor="#4CC1EE"
			></uni-segmented-control>
		</view>

		<view v-show="activeTab === 0">
			<scroll-view
				scroll-y
				class="scroll-content"
				:style="{height: scrollHeight + 'px'}"
				@scrolltolower="handleLoadMore"
				lower-threshold="70"
			>
				<view
					v-if="isNullData"
					class="no-data"
				>
					<van-empty description="暂无数据" />
				</view>

				<view
					class="order-item-wrap mb-20"
					v-for="(item, index) in list"
					:key="index"
					@click="handleToOrderDetail(item)"
				>
					<view class="left">
						<view class="status">{{goodsStatusMapText[item.status]}}</view>
						<view class="time">{{item.createtime}}</view>
					</view>
					<view class="right">
						<view class="price">{{item.real_num}}</view>
					</view>
				</view>

				<view
					class="loading"
					v-if="loading"
				>
					<van-loading
						color="#0091FF"
						size="34px"
					/>
				</view>

			</scroll-view>
		</view>
		<view v-show="activeTab === 1">
			<scroll-view
				scroll-y
				class="scroll-content"
				:style="{height: scrollHeight + 'px'}"
				@scrolltolower="handleLoadMore"
				lower-threshold="70"
			>
				<view
					v-if="isNullData"
					class="no-data"
				>
					<van-empty description="暂无数据" />
				</view>

				<view
					class="order-item-wrap mb-20"
					v-for="(item, index) in list"
					:key="index"
					@click="handleToOrderDetail(item)"
				>
					<view class="left">
						<view class="status">{{goodsStatusMapText[item.status]}}</view>
						<view class="time">{{item.createtime}}</view>
					</view>
					<view class="right">
						<view class="price">{{item.real_num}}</view>
					</view>
				</view>

				<view
					class="loading"
					v-if="loading"
				>
					<van-loading
						color="#0091FF"
						size="34px"
					/>
				</view>

			</scroll-view>
		</view>
		<view v-show="activeTab === 2">
			<scroll-view
				scroll-y
				class="scroll-content"
				:style="{height: scrollHeight + 'px'}"
				@scrolltolower="handleLoadMore"
				lower-threshold="70"
			>
				<view
					v-if="isNullData"
					class="no-data"
				>
					<van-empty description="暂无数据" />
				</view>

				<view
					class="order-item-wrap mb-20"
					v-for="(item, index) in list"
					:key="index"
					@click="handleToOrderDetail(item)"
				>
					<view class="left">
						<view class="status">{{goodsStatusMapText[item.status]}}</view>
						<view class="time">{{item.createtime}}</view>
					</view>
					<view class="right">
						<view class="price">{{item.real_num}}</view>
					</view>
				</view>

				<view
					class="loading"
					v-if="loading"
				>
					<van-loading
						color="#0091FF"
						size="34px"
					/>
				</view>

			</scroll-view>
		</view>

	</view>
</template>

<script>
  const app = getApp()

  export default {
    data() {
      return {
        activeTab: 0,
        scrollHeight: 600,
        pageIndex: 1,
        pageSize: 10,
        loading: false,
        hasMoreData: false,
        isNullData: false,
        list: [],
        goodsStatusMapText: {
          0: '待审核',
          1: '提现成功',
          2: '提现失败'
        },
        items: [
          '待审核',
          '提现成功',
          '提现失败'
        ],
      };
    },
    methods: {
      handleChangeOrderStatus(res) {
        const {
          currentIndex
        } = res

        this.activeTab = currentIndex
        this.handleInitPageInfo()
        this.handleGetList()
      },
      handleInitPageInfo() {
        this.pageIndex = 1
        this.hasMoreData = false
        this.isNullData = false
        this.list =  []
      },
      handleScroll(res) {
        console.log(res);
      },
      handleLoadMore() {
        const {
          loading,
          pageIndex,
          hasMoreData
        } = this

        if (loading === false && hasMoreData) {
          this.loading = true
          this.isNullData = false
          this.pageIndex = pageIndex + 1
          this.handleGetList()
        }
      },
      handleGetList() {
        const {
          activeTab,
          pageIndex,
          pageSize,
        } = this

        this.loading = true
        app.request({
          status: activeTab,
          page: pageIndex,
          limit: pageSize
        }, '/api/logistics/express/withdraw_list').then((res) => {
          const {
            code,
            data,
            msg
          } = res
          console.log(res);

          if (code === 1) {
            let getList = data.data || []
            let list = this.list


            const newList = list.concat(getList)
            let hasMoreData = true
            let isNullData = false

            if (getList.length < pageSize || !getList.length) {
              hasMoreData = false
            }

            if (pageIndex === 1 && !getList.length) {
              isNullData = true
            }

            this.hasMoreData = hasMoreData
            this.isNullData = isNullData
            this.list = newList
          } else {
            Toast(msg)
          }
        }).finally(() => {
          this.loading = false
        })
      },

      handleToOrderDetail(item) {
        console.log(item);
        const {
          id
        } = item
        const that = this

        uni.navigateTo({
          url: '/pages/rider/withdrawalRecordsDetail?id=' + id,
          events: {
            refreshList: function () {
              that.handleInitPageInfo()
              that.handleGetList()
            }
          }
        })
      }
    },
    onLoad() {
      const windowInfo = uni.getWindowInfo()
      const {
        windowHeight
      } = windowInfo

      this.scrollHeight = windowHeight - 36
      this.handleGetList()
    },
  }
</script>

<style lang="scss">
	.kd-order-page {
		width: 100%;
		min-height: 100vh;
		background-color: #F9F9F9;
		.scroll-content {
			padding-top: 20rpx;
			box-sizing: border-box;
			.mb-20 {
				margin-bottom: 20rpx;
			}
			.order-item-wrap {
				position: relative;
				width: 100%;
				height: 138rpx;
				padding: 0 28rpx;
				box-sizing: border-box;
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left {
					.status {
						margin-bottom: 16rpx;
						font-size: 30rpx;
					}

					.time {
						font-size: 26rpx;
						color: #888;
					}
				}

				.right {
					.price {
						font-size: 32rpx;
						font-weight: bold;
					}
				}
			}
		}

		.loading {
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>
